<template>
  <div id="app" class="inner-container">
    <div class="main">
      <div class="Login_div">
        <div class="login">
          <div class="form">
            <h2 class="h2">欢迎会员登录</h2>
            <div class="msg">{{ msg }}</div>
            <form class="f1">
              <span id="uname" style>
                <i style="font-size: 25px;">
                  <img
                    src="~/assets/image/login-register/image/user.png"
                    style="width: 15px;height: 15px;"
                  />
                </i>

                <!-- 用户名 -->
                <input
                  type="text"
                  name
                  value
                  placeholder="用户名"
                  v-model="user"
                  class="input"
                  autocomplete
                />
              </span>
              <br />
              <br />
              <br />

              <span id="upwd" style="margin-left: 12px;">
                <i class style="font-size: 25px;">
                  <img
                    src="~/assets/image/login-register/image/pwd.png"
                    style="width: 15px;height: 15px;"
                  />
                </i>

                <!-- 密码 -->
                <input
                  :type="condition ? 'password' : 'text'"
                  name
                  value
                  placeholder="密码"
                  v-model="pwd"
                  class="input"
                  autocomplete
                />
                <i class="el-icon-view" @click="showPwd"></i>
              </span>
              <br />
              <div :class="boxClass">
                <slide-verify
                  :l="44"
                  :r="10"
                  :w="260"
                  :h="80"
                  slider-text="向右滑动"
                  @success="onSuccess"
                  @fail="onFail"
                  @refresh="onRefresh"
                  style="margin: 30px auto;"
                ></slide-verify>
              </div>
              <div class="yz">
                <button
                  style="width: 48%;height: 37px;margin-top: 10px;margin-left: 5px;"
                  type="button"
                  @click="showBox"
                  :class="btnClass"
                  :disabled="dis2"
                >{{ btnmsg }}</button>
              </div>
            </form>
            <br />
            <span id="save" style="margin-top: 20px;">
              <span style>
                <span id>
                  <input
                    type="checkbox"
                    name
                    id
                    value
                    @click="rememberPwd"
                    :checked="checkedChoice"
                  />记住密码
                </span>&nbsp;&nbsp;
                <router-link target="_blank" to="/login/findPwd" style="color: red;">找回密码</router-link>
                <!-- <span @click="routeTo('findPwd')">找回密码</span> -->
              </span>
            </span>
            <br />
            <br />
            <el-row style="position: relative;">
              <el-button type="success" class="btn" @click="login">点击登录</el-button>
            </el-row>
          </div>
        </div>
      </div>
      <div class="Options_div">
        <div id="Switch_Registered">
          <h1>还没有账号？</h1>
          <p>立即注册，和我们一起开始旅程吧</p>
          <button id="Registered_button" @click="clear">前往注册</button>
        </div>
        <div id="Switch_Login">
          <h1>已有账号？</h1>
          <p>请使用您的帐号进行登录</p>
          <button id="Login_button" @click="reclear">前往登录</button>
        </div>
      </div>
      <div class="Registered_div">
        <div class="reg">
          <div class="form">
            <h2 class="h2">欢迎会员注册</h2>
            <div class="msg">{{ regmsg }}</div>
            <form class="f1" action="index.html" method="post">
              <span id="uname" style="margin-left: 70px;">
                <i style="font-size: 25px;">
                  <img
                    src="~/assets/image/login-register/image/user.png"
                    style="width: 15px;height: 15px;"
                  />
                </i>

                <!-- 用户名 -->
                <input
                  type="text"
                  name
                  value
                  placeholder="用户名"
                  v-model="user"
                  style=" "
                  autocomplete
                  @blur="userChecked"
                  id="regUser"
                  required
                  >
              </span>
              <span>
                <img
                  :src="usersrc"
                  style="width:20px;height: 20px;align-items: center;line-height: 20px;"
                  :class="`${userClass}`"
                  id="reg_user"
                />
              </span>
              <br />
              <br />
              <!-- nickname -->
              <span id="nickname" style="margin-left:70px;">
                <i style="font-size: 25px;">
                  <img
                    src="~/assets/image/login-register/image/user.png"
                    style="width: 15px;height: 15px;"
                  />
                </i>

                <input type="text" name value placeholder="昵称" v-model="nickname" autocomplete required/>
              </span>
              <br />
              <br />
              <!-- 密码 -->
              <span id="upwd" style="margin-left: 70px;">
                <i class style="font-size: 25px;">
                  <img
                    src="~/assets/image/login-register/image/pwd.png"
                    style="width: 15px;height: 15px;"
                  />
                </i>

                <!-- 密码 -->
                 <el-tooltip class="item" effect="light" content="密码可以为任意字符、数字、字母" placement="right">
                       <input type="password" placeholder="密码" v-model="regpwd" autocomplete/>
                 </el-tooltip>

              </span>
              <span>
                <img
                  :src="pwdsrc"
                  style="width: 20px;height:20px;align-items: center;line-height: 20px;"
                  :class="`${pwdClass}`"
                  id="reg_pwd"
                />
              </span>
              <br />
              <br />
              <span id style="margin-left: 70px;">
                <i style="font-size: 25px;">
                  <img
                    src="~/assets/image/login-register/image/pwd.png"
                    style="width: 15px;height: 15px;"
                  />
                </i>

                <!-- 确认密码 -->
                <input type="password" name value placeholder="确认密码" v-model="repwd" autocomplete required/>
              </span>
              <span>
                <img
                  :src="repwdsrc"
                  style="width: 20px;height:20px;align-items: center;line-height: 20px;"
                  :class="`${rePwdClass}`"
                />
              </span>
              <br />
              <br />
              <!-- 手机号-->

              <span id style="margin-left: 70px;">
                <i class style="font-size: 25px;">
                  <img
                    src="~/assets/image/login-register/image/phone.png"
                    style="width: 15px;height: 15px;"
                  />
                </i>
                  <el-tooltip class="item" effect="light" content="请输入11位手机号" placement="right">
                       <input type="text" name value placeholder="请输入手机号" v-model="phone" autocomplete id="regPhone"/>
                 </el-tooltip>

              </span>
              <span>
                <img
                  :src="phonesrc"
                  style="width: 20px;height:20px;align-items: center;line-height: 20px;"
                  :class="`${phoneClass}`"
                />
              </span>
              <br />
              <br />
              <!-- 验证码 -->
              <span style="margin-left: 55px;">
                <input
                  type="text"
                  name
                  v-model="code"
                  value
                  style="border-radius:4px;border:1px solid #c8cccf;color:#6a6f77;;width: 100px;height: 30px;margin-left:20px; border: 1px solid #7d7d7d;"
                  placeholder="验证码"
                  required
                />&nbsp;&nbsp;
                <button
                  id="sendBtn"
                  type="button"
                  style="width: 75px;height: 28px;background-color: #dffff5;border: none;border-radius: 7px;font-size: 15px;top:2px;
                  position:relative;top:5px;left:0px"
                  :v-model="num"
                  @click="send"
                  :disabled="senddis"
                >{{ num }}</button>
              </span>
              <br />
              <br />
            </form>
            <el-row style="position: relative;">
              <el-button type="success" class="btn" @click="reg">立即注册</el-button>
            </el-row>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="animated bounceInDown words">
      <p style="" class="text">梦想</p>
    </div>
    <div class="words2">
      <p style="" class="text2 animated bounceInRight">希望</p>
    </div>
    <div class="words3">
      <p style="" class="text3 animated bounceInUp ">善意</p>
    </div>
    <div class="words4">
      <p style="" class="text4 animated bounceInLeft">真情</p>
    </div>-->
    <!-- <div id="">
		<img src="../../assets/image/home/ggp.png" style="width: 300px ;height: 400px;position: absolute;left:90px;top:80px;">
    </div>-->
    <div class="back">
      <a class="btn btn-5" @click="backHome">返回首页</a>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { getMsg, Reg, Login, accountCheck,debounce } from "network/login-register.js";
import SlideVerify from "vue-monoplasty-slide-verify";
import base64 from "js-base64";
import { encrypt, decrypt } from "common/des.js";
import NProgress from "nprogress";
import axios from "axios";
export default {
  name: "login",
  data() {
    return {
      msg: "",
      nickname: "",
      regmsg: "",
      boxClass: "box",
      btnClass: "",
      btnmsg: "点击按钮进行验证",
      boxshow: "hidden",
      dis: false,
      dis2: false,
      condition: true,
      num: "点击发送",
      timer: null,
      t: 60,
      senddis: false,
      src: "yes.png",
      pwdsrc: "",
      repwdsrc: "",
      usersrc: "",
      phonesrc: "",
      user: "",
      pwd: "",
      repwd: "",
      phone: "",
      pwdClass: "hidden",
      rePwdClass: "hidden",
      userClass: "hidden",
      phoneClass: "hidden",
      YesSrc: require("@/assets/image/login-register/image/yes.png"),
      ErrSrc: require("@/assets/image/login-register/image/err.png"),
      passSrc: require("@/assets/image/login-register/image/useful.png"),
      errorSrc: require("@/assets/image/login-register/image/exist.png"),
      reg_id: 1,
      code: "",
      checkedChoice: false,
      encodePWd: "",
      yzflag: false,
      regpwd: "",
      reqflag:false,
      timer:null,
      regUserFlag:false,
      regPwdFlag:false,
      regNickNameFlay:false,
      regRepwdFlag:false,
      regPhoneFlay:false
    };
  },
  methods: {

    loadJS(url, callback) {
      let script = document.createElement("script"),
        fn = callback || function() {};
      script.type = "text/javascript";
      //IE
      if (script.readyState) {
        script.onreadystatechange = function() {
          if (
            script.readyState == "loaded" ||
            script.readyState == "complete"
          ) {
            script.onreadystatechange = null;
            fn();
          }
        };
      } else {
        //其他浏览器
        script.onload = () => {
          fn();
        };
        script.onerror = () => {
          console.log("加载错误");
          fn();
        };
      }
      script.src = url;
      document.getElementsByTagName("head")[0].appendChild(script);
    },
    onSuccess(times) {
      console.log("验证通过，耗时" + times + "毫秒");
      //this.msg = `验证成功, 耗时${(times / 1000).toFixed(1)}s`;
      this.$message({
        message: `验证成功, 耗时${(times / 1000).toFixed(1)}s`,
        type: 'success',
        showClose: true,
        center: true,
        duration:5000
      });
      this.boxClass = "hidden";
      this.btnmsg = "";
      this.btnClass = "btnclass animated shake";
      this.dis2 = "disabled";
      this.yzflag = true;
    },
    onFail() {
      console.log("验证不通过");
      this.msg = "";
      this.$message({
        message: `验证失败`,
        type: 'error',
        showClose: true,
        center: true,
        duration:5000
      });
    },
    onRefresh() {
      console.log("点击了刷新小图标");
      this.msg = "";
    },
    onFulfilled() {
      console.log("刷新成功啦！");
    },
    onAgain() {
      console.log("检测到非人为操作的哦！");
      this.msg = "try again";
      // 刷新
      this.$refs.slideblock.reset();
    },

    showBox() {
      this.boxClass = "boxShow";
    },
    showPwd() {
      this.condition = !this.condition;
    },
    send() {
      this.senddis = true;
      getMsg(this.reg_id, this.phone).then(res => {
        console.log(res);
      });
      this.timer = setInterval(() => {
        this.t -= 1;
        this.num = this.t + "s";
        if (this.t <= 0) {
          this.num = "重新发送";
          this.dis = false;
          clearInterval(this.timer);
          this.senddis = false;
          this.t = 60;
          return;
        }
      }, 1000);
    },

    routeTo(path) {
      console.log("11");
      this.$router.push(path);
    },
    regs() {
      if (this.code == "") {
        //alert("请输入验证码");
        this.$message({
          showClose: true,
          message: '验证码不能为空',
          type: 'warning',
          center:true
        });
      }
      //  else if(this.regUserFlag==false||this.regPwdFlag==false||this.regNickNameFlay==false||this.regRepwdFlag==false||this.regPhoneFlay==false){
      //   this.$message({
      //     showClose: true,
      //     message: '注册信息填写错误，请检查注册信息，重新注册',
      //     duration:7000,
      //     type: 'error'
      //   });
      // }
        Reg(this.code, this.phone, this.nickname, this.regpwd, this.user).then(
          res => {
            console.log(res);
            if (res.code == 20000) {
              this.$message({
                message: '恭喜你，注册成功',
                type: 'success',
                center:true,
                duration:5000
              });
              // alert("恭喜你，注册成功");
            }
            if (res.code == 20001) {
              //alert("注册失败");
              this.$message({
                showClose: true,
                message: '注册失败，请稍后重试',
                type: 'error',
                center:true
              });
            }
          }
        );

    },

    async logins() {
      const instance = axios.create({
        timeout: 5000
      });
      //请求拦截判断
      instance.interceptors.request.use(
        config => {
          if(this.yzflag==true){
            this.reqflag=true;
          }else{
            this.reqflag=false;
          }
          return config;
        },
        err => {
          console.error(err);
          return err;
        }
      );

      if(this.reqflag){
        await Login(this.pwd, this.user);
        console.log(await Login(this.pwd, this.user));
      }
      let result=await Login(this.pwd, this.user);
      if (!this.yzflag) {
        //this.msg = "请先完成验证";
        this.$message({
          showClose: true,
          message: '请先完成验证',
          type: 'warning',
          center:true,
          duration:5000
        });
      }
      if (result.success && this.yzflag == true) {
        this.$store.state.isLogin = true;
        this.$router.push({
          path: "/home"
        });
        sessionStorage.setItem("userToken", result.data.token);
        localStorage.setItem("username", this.user);
      }
      if (this.yzflag&&!result.success) {
        this.$message.error('用户名或密码错误，请稍后重试');
        //alert("登录失败");
      }

    },
    login: debounce(function () {
      this.logins();
    }),
    reg: debounce(function () {
      this.regs();
    }),
    rememberPwd() {
      this.checkedChoice = !this.checkedChoice;
      this.encodePWd = encrypt(this.pwd);
      // 记住账号

      localStorage.setItem("username", this.user);
      if (this.checkedChoice) {
        // 记住密码
        localStorage.setItem("password", this.encodePWd);
        console.log(this.encodePWd);
        this.$message({
          showClose: true,
          message: '记住密码成功',
          type: 'success',
          center:true,
          duration:3000
        });
      } else {
        localStorage.removeItem("username");
        localStorage.removeItem("password");
      }
    },
    backHome() {
      this.$router.push({ path: "/home" });
    },
    clear() {
      this.user = "";
      this.regpwd = "";
      this.userClass = "hidden";
    },
    reclear() {
      this.user = localStorage.getItem("username");
      this.pwd = decrypt(localStorage.getItem("password"));
      this.userClass = "visiable";
    },
    userChecked() {
      let that=this;
      let path = "@/assets/image/login-register/image/useful.png";
      accountCheck(this.user).then(result => {
        console.log(result);
        if (result.code == 20001) {
          that.regUserFlag==ture;
          $("#reg_user").css({
            display: "inline-block",
            width: "70px"
          });
          $("#reg_user").attr(
            "src",
            "../../assets/image/login-register/image/useful.png"
          );
          this.$message({
            showClose: true,
            message: '用户名可用',
            type: 'success',
            center:true
          });
        }
        if (result.code == 20000) {
          $("#reg_user").css({
            display: "inline-block",
            width: "70px"
          });
          $("#reg_user").attr(
            "src",
            "../../assets/image/login-register/image/exist.png"
          );
          this.$message({
            showClose: true,
            message: '用户名已存在，请重新输入用户名',
            type: 'error',
            center:true
          });
        }
      });
      $("#reg_user").css({
        display: "none"
      });
    },

  },

  watch: {
    regpwd() {
      var reg = /./;
      var result = reg.test(this.regpwd);
      if (result == true) {
        this.pwdClass = "visiable animated flash";
        this.pwdsrc = this.YesSrc;
        this.regPwdFlag=true
      } else {
        this.pwdClass = "visiable";
        this.pwdsrc = this.ErrSrc;
      }
    },
    userChecked() {},
    phone() {
      var reg = /^1[3-9]\d{9}$/;
      var result = reg.test(this.phone);
      if (result == true) {
        this.phoneClass = "visiable animated flash";
        this.phonesrc = this.YesSrc;
        this.regPhoneFlay=true
      } else {
        this.phoneClass = "visiable";
        this.phonesrc = this.ErrSrc;
       this.tips();
      }
    },
    repwd() {
      var pwd = this.regpwd;
      var repwd = this.repwd;
      if (pwd == repwd) {
        this.rePwdClass = "visiable animated flash";
        this.repwdsrc = this.YesSrc;
        this.regRepwdFlag=true
      } else {
        this.rePwdClass = "visiable";
        this.repwdsrc = this.ErrSrc;
      }
    },
    nickname() {
      this.nickname = this.nickname;
      var reg = /./;
      var result = reg.test(this.nickname);
      if (result == true) {
          this.regNickNameFlay=true
      } else {
        this.regNickNameFlay=false
      }
    },
    code() {
      this.code = this.code;
    },
    reqflag(){
      this.reqflag=this.reqflag;
    }
  },
  computed: {},
  created() {
    if (this.pwd != null) {
      /* this.pwd=this.$Base64.decode(this.encodePWd); */
      this.pwd = decrypt(localStorage.getItem("password"));
    }
    if (this.pwd == null) {
      this.pwd = "";
    }
    if (this.user != null) {
      this.user = localStorage.getItem("username");
    }
    if (this.user == null) {
      this.user = "";
    }
    if (this.pwd != null && this.user != null) {
      this.checkedChoice = true;
    }
  },
  mounted() {
    this.loadJS("https://cdn.jsdelivr.net/gh/yremp/yremp-js@1.5/sakura.js");
    $(function() {
      $("#Registered_button").click(function() {
        $(".Login_div").animate({ width: "0", opacity: "0" });
        $(".Registered_div").animate({ width: "50%", opacity: "1" });
        $("#Switch_Registered").animate({ opacity: "0" });
        $("#Switch_Login").animate({ opacity: "1" });
        $("#Switch_Registered").slideUp();
        $("#Switch_Login").slideDown();
      });

      $("#Login_button").click(function() {
        $(".Registered_div").animate({ width: "0", opacity: "0" });
        $(".Login_div").animate({ width: "50%", opacity: "1" });
        $("#Switch_Login").animate({ opacity: "0" });
        $("#Switch_Registered").animate({ opacity: "1" });
        $("#Switch_Login").slideUp();
        $("#Switch_Registered").slideDown(500);
      });
    });

  },
  destroyed() {
    console.log(document.body);
    document.body.removeChild(document.getElementById("canvas_sakura"));
  },
  components: {
    "remote-css": {
      render(createElement) {
        return createElement("link", {
          attrs: {
            rel: "stylesheet",
            href: this.href
          }
        });
      },
      props: {
        href: {
          type: String,
          required: true
        }
      }
    },
    "remote-js": {
      render(createElement) {
        return createElement("script", {
          attrs: {
            type: "text/javascript",
            src: this.src
          }
        });
      },
      props: {
        src: {
          type: String,
          required: true
        }
      }
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.hidden {
  display: none;
}

#app {
  /* margin-top: -66px; */
  position: absolute;
  display: flex;
  width: 100vw;
  height: calc(100vh - 2px);
  background: url(../../assets/image/home/bbc.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 兼容IE10+ */
.inner-container {
  -ms-overflow-style: none;
}

.login {
  position: relative;
  width: 100%;
  height: 100%;
  float: left;
  position: relative;
  display: inline-block;
}

.login .form {
  width: 100%;
  height: 100%;
}

#uname {
  height: 30px;
  line-height: 25px;
}

#upwd {
  height: 30px;
  line-height: 25px;
}

.login .input {
  width: 50%;
  border: none;
  border-bottom: 1px solid black;
  align-items: center;
  margin-left: 5px;
  background-color: rgba(51, 51, 0, 0);
}

input:focus {
  outline: none;
}

.f1 {
  margin-top: 30px;
}

.login .h2 {
  margin-top: 20%;
}

.login .btn {
  width: 55%;
  height: 45px;
}

.msg {
  position: absolute;
  top: 100px;
  width: auto;
  height: 20px;
  line-height: 20px;
  left: 110px;
  color: green;
  font-size: 18px;
}

.box {
  width: 280px;
  height: 200px;
  position: absolute;
  z-index: 999;
  background-color: #afafaf;
  top: 17%;
  left: 10%;
  display: none;
}

.boxShow {
  width: 280px;
  height: 200px;
  position: absolute;
  z-index: 999;
  background-color: #afafaf;
  top: 17%;
  left: 10%;
  display: block;
}

.btnclass {
  background-image: url(../../../src/assets/image/login-register/image/yz.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 1px solid rgb(38, 194, 103);
  border-radius: 5px;
}

.show {
  display: block;
}

.reg {
  border: 1px solid rgba(243, 243, 243, 0.6);
  width: 100%;
  height: 100%;
  box-shadow: 0 5px 15px -5px rgba(51, 51, 0, 0.5);
  /* position: absolute;
		left: 0; */
  float: left;
  position: relative;
  display: inline-block;
  background-color: rgba(243, 243, 243, 0.6);
}

.reg .form {
  border: 1px solid rgba(243, 243, 243, 0.6);
  width: 100%;
  height: 100%;
}

.reg #uname {
  height: 30px;
  line-height: 25px;
}

.reg #upwd {
  height: 30px;
  line-height: 25px;
}

.reg input {
  width: 175px;
  border: none;
  margin-left:5px;
  border-bottom: 1px solid black;
  align-items: center;
  background-color: rgba(51, 51, 0, 0);
}

.reg input:focus {
  outline: none;
}

.reg .f1 {
  margin-top: 20px;
}

.reg .h2 {
  margin-left: 28%;
  margin-top: 15%;
}

.reg .btn {
  margin-left: 70px;
  width: 60%;
  height: 40px;
}

.reg .msg {
  position: absolute;
  top: 60px;
  width: auto;
  height: 20px;
  line-height: 20px;
  left: 70px;
  color: green;
}

.hidden {
  display: none;
}

.visibale {
  display: block;
}

.mid {
  background: url(../../../src/assets/image/login-register/image/dr1.png);
  -webkit-filter: blur(0px);
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid white;
  width: 50%;
  height: 100%;
  box-shadow: 0 5px 15px -5px rgba(51, 51, 0, 0.5);
  /* position: absolute;
		left: 0; */
  float: left;
  z-index: 1;
  position: relative;
  display: inline-block;
}

.mid:hover {
  -webkit-filter: blur(0.8px);
  cursor: pointer;
}

.view {
  width: 1050px;
  height: 70vh;
  border: 1px solid white;
  box-shadow: 0 5px 15px -5px rgba(51, 51, 0, 0.5);
  /* overflow: hidden; */
  overflow-x: scroll;
}

.sp1 {
  cursor: pointer;
}

.words {
  width: 90px;
  height: 50px;
  position: absolute;
  left: 260px;
  top: 300px;
  font-size: 43px;
  color: black;
}

.words p {
  left: 150px;
  position: relative;
}

.words2 {
  width: 90px;
  height: 50px;
  /* border: 1px solid black; */
  position: absolute;
  left: 100px;
  top: 300px;
  font-size: 43px;
  color: black;
}

.words3 {
  width: 90px;
  height: 50px;
  /* border: 1px solid black; */
  position: absolute;
  left: 180px;
  top: 200px;
  font-size: 43px;
  color: black;
}

.words4 {
  width: 90px;
  height: 50px;
  /* border: 1px solid black; */
  position: absolute;
  left: 340px;
  top: 230px;
  font-size: 43px;
  color: black;
}

.words2 p {
  font-size: 32px;
  top: -10px;
  position: relative;
}

.words4 p {
  font-family: "Audiowide";
  text-align: center;
  color: #ffff00;
  font-size: 32px;
  -webkit-transition: all 1.5s ease;
  transition: all 1.5s ease;
}

.words4 p:hover {
  color: #fff;
  -webkit-animation: Glow 1.5s ease infinite alternate;
  animation: Glow 1.5s ease infinite alternate;
}

@-webkit-keyframes Glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #00a67c,
      0 0 70px #00a67c, 0 0 80px #00a67c, 0 0 100px #00a67c, 0 0 150px #00a67c;
  }

  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00a67c,
      0 0 35px #00a67c, 0 0 40px #00a67c, 0 0 50px #00a67c, 0 0 75px #00a67c;
  }
}

@keyframes Glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #00a67c,
      0 0 70px #00a67c, 0 0 80px #00a67c, 0 0 100px #00a67c, 0 0 150px #00a67c;
  }

  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #00a67c,
      0 0 35px #00a67c, 0 0 40px #00a67c, 0 0 50px #00a67c, 0 0 75px #00a67c;
  }
}

.words3 p {
  font-size: 34px;
  top: -10px;
  position: relative;
  color: #ee4f77;
}

.text {
  width: 300px;
  height: 200px;
  position: absolute;
  left: 50%;
  margin-left: -150px;
  background-image: -webkit-linear-gradient(
    left,
    blue,
    #66ffff 10%,
    #cc00ff 20%,
    #cc00cc 30%,
    #ccccff 40%,
    #00ffff 50%,
    #ccccff 60%,
    #cc00cc 70%,
    #cc00ff 80%,
    #66ffff 90%,
    blue 100%
  );

  -webkit-text-fill-color: transparent;
  /* 将字体设置成透明色 */
  -webkit-background-clip: text;
  /* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 4s linear infinite;
  font-size: 35px;
}

@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.text2 {
  color: #aaff7f;
  letter-spacing: 0;
  text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777,
    0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333,
    0px 8px 7px #001135;
}

.text3 {
  color: transparent;
  -webkit-text-stroke: 1px black;
}
/*  */

h1 {
  font-weight: bold;
  margin-top: 15%;
}

a {
  color: black;
  font-size: 15px;
  text-decoration: none;
  margin: 20px 0;
}
.main {
  background: transparent;
  border-radius: 10px;
  /* box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); */
  position: relative;
  display: flex;
  overflow: hidden;
  width: 700px;
  height: 480px;
  max-width: 100%;
  min-height: 480px;
  margin-left: 25%;
  margin-top: 7%;
  vertical-align: center;
  box-shadow: inset 0px 0px 5px #fff, inset 2px 0px 4px #ffaaff,
    inset -2px 0px 2px #0ff, inset 0px 0px 2px #ffaaff, inset -2px 0px 2px #0ff,
    0px 0px 5px #fff, -2px 0px 2px #ffaaff, 2px 0px 2px #0ff;
}
.Login_div {
  background: transparent;
  width: 50%;
  height: 100%;
  opacity: 1;
  text-align: center;
}
.Options_div {
  background: url(../../../src/assets/image/login-register/image/dr1.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  width: 50%;
  height: 100%;
  color: var(--color-nav-title);
  text-align: center;
  font-weight: bold;
}
.Options_div h1 {
  margin: 40% 0 30px 0;
}
.Options_div span {
  font-size: 15px;
  letter-spacing: 1px;
}
.Options_div button {
  background: rgba(255, 235, 209, 0.8);
  border: 1px solid #fff;
  border-radius: 20px;
  color: var(--color-nav-title);
  font-size: var(--font-size-title);
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 5px;
  margin-top: 8%;
}
.Registered_div {
  background: transparent;
  width: 0;
  height: 100%;
}
.Registered_div .submit_button {
  margin-top: 5%;
}
.eneter {
  margin-top: 10%;
}

#Switch_Registered {
  width: 100%;
  height: 100%;
  opacity: 1;
}
#Switch_Login {
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
}
/* back */
.back .btn {
  flex: 1 1 auto;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
  border-radius: 10px;
  width: 100px;
  height: 40px;
}
.btn:hover {
  background-position: right center; /* change the direction of the change here */
}

.btn-1 {
  background-image: linear-gradient(
    to right,
    #f6d365 0%,
    #fda085 51%,
    #f6d365 100%
  );
}

.btn-2 {
  background-image: linear-gradient(
    to right,
    #fbc2eb 0%,
    #a6c1ee 51%,
    #fbc2eb 100%
  );
}

.btn-3 {
  background-image: linear-gradient(
    to right,
    #84fab0 0%,
    #8fd3f4 51%,
    #84fab0 100%
  );
}

.btn-4 {
  background-image: linear-gradient(
    to right,
    #a1c4fd 0%,
    #c2e9fb 51%,
    #a1c4fd 100%
  );
}

.btn-5 {
  background-image: linear-gradient(
    to right,
    #ffecd2 0%,
    #fcb69f 51%,
    #ffecd2 100%
  );
}
.back {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 100px;
  margin: 0 auto;
  min-height: 40px;
  position: absolute;
  left: 2%;
}
.back a {
  line-height: 40px;
}
.back:hover {
  cursor: pointer;
}
#sendBtn {
  text-align: center;
  font-style: normal;
  text-decoration: none;
  vertical-align: text-bottom;
  zoom: 1;
  outline: none;
  font-size-adjust: none;
  font-stretch: normal;
  border-radius: 50px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
  color: #fefee9;
  border: 0.2px solid #2299ff;
  background-repeat: repeat;
  background-size: auto;
  background-origin: padding-box;
  background-clip: padding-box;
  background-color: #3399ff;
  background: linear-gradient(to bottom, #eeeff9 0%, #3399ff 100%);
}
</style>
